<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>腾讯云视频资源列表</title>
    {load href="__PLUG__/semantic/semantic.min.css"/}
    {load href="__PLUG__/jquery.min.js"/}
    {load href="__PLUG__/layer/layer.js"/}
    {load href="__BKD__/js/main.js"/}
    <style type="text/css">
    </style>
</head>
<body>
<div id="main-area" style="margin: 15px; ">
    <h3>腾讯云视频资源列表 <span style="color: orange">{{loadText}}</span>
    <div style="float: right">
        <a class="ui tiny submit button" href="javascript:;" onclick="location.reload()">刷新</a>
        <a class="ui teal tiny submit button" href="">上传视频(演示原因已关闭)</a>
    </div>
    </h3>
    <table class="ui celled small table">
        <thead>
        <tr>
            <th width="100">封面</th>
            <th width="20%">标题</th>
            <th width="35%">视频URL</th>
            <th>FileId</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list.MediaInfoSet">
            <td><img :src="item.BasicInfo.CoverUrl" style="height: 80px"></td>
            <td>{{item.BasicInfo.Name}}</td>
            <td style="word-break: break-all"><a :href="item.BasicInfo.MediaUrl" target="_blank">{{item.BasicInfo.MediaUrl}}</a></td>
            <td>{{item.FileId}}</td>
            <td class="right aligned collapsing">
                <a class="ui small label" href="javascript:;" @click="handleRemove(item.FileId)">删除</a>
                {if isset($type) and $type==1}<a class="ui green small label" href="javascript:;" @click="handleSelect(item.BasicInfo)">选择</a>{/if}
            </td>
        </tr>
        </tbody>
    </table>
    <div style="display: flex">
        <div style="flex: 1; font-size: 12px;">
            上传后视频不会实时在列表中显示，按腾讯规则会有1分钟左右的延迟，可登录<a href="https://console.cloud.tencent.com/vod/media">腾讯云视频管理中心</a>查看。
            视频总数：{{list.TotalCount||0}}
        </div>
        <div style="flex: 1; text-align: right;">
            <div class="ui pagination small menu">
                <a class="item" v-for="p in (list.TotalCount%10 == 0 ? list.TotalCount/10 : (parseInt(list.TotalCount/10) + 1)) "
                    href="javascript:;" @click="changePage(p)" :class="{active: p == page}">
                    {{p}}
                </a>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdn-go.cn/cdn/vod-js-sdk-v6/latest/vod-js-sdk-v6.js"></script>

<script type="text/javascript">
    ;(function () {
        var app = new Vue({
            el: '#main-area',
            data: {
                list: {
                    MediaInfoSet: [],
                    RequestId: '',
                    TotalCount: 0,
                },
                page: 1,
                loadText: ''
            },
            created: function () {
                this.handleReq();
            },
            methods: {
                handleReq: function () {
                    var _this = this;
                    _this.loadText = '加载中...';
                    axios.post('{:url("vodList")}', {page: _this.page}).then(function (response) {
                        _this.list = response.data;
                        // console.log(_this.list)
                        _this.loadText = '';
                    })
                },
                changePage: function (page) {
                    this.page = page;
                    this.handleReq();
                },
                handleRemove: function(fileId) {
                    var _this = this;
                    axios.post('{:url("vodDel")}', {file_id: fileId}).then(function (response) {
                        if(response.data.code ==1){
                            _this.handleReq();
                        } else {
                            alert(response.data.msg || '删除失败');
                        }
                    })
                },
                handleSelect: function(item) {
                    closeCurrentWin();
                    parent.handleSelectVod(item);
                }
            },
        })
    })();
</script>
</body>
</html>